<template>
    <el-dialog class="dialog" :destroy-on-close="true" title="梯控指令" :visible.sync="isShow" :close-on-click-modal="false"
        @close="onDialogClose">
        <el-form ref="form" label-width="auto" class="form" :model="formData" :rules="rules">
            <el-form-item label="梯控名称">
                <div style="display:flex; justify-content:space-between">
                    <span>{{ infoData.door_name }}({{ infoData.door_guid }})</span>
                    <span>{{ formData.door_status == 1 ? '在线' : '离线' }}</span>
                </div>
            </el-form-item>
            <el-form-item label=" 操作指令" prop="cmd_type">
                <el-select v-model="formData.cmd_type" placeholder="请选择操作指令" @change="cmdChange">
                    <el-option v-for="item in cmdListData" :key="item.cmd_code" :label="item.cmd_name"
                        :value="item.cmd_code"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二维码" prop="qr_type" v-if="formData.cmd_type == 'confqr'">
                <el-select v-model="formData.qr_type" placeholder="请选择操作指令" @change="qrTypeChange">
                    <el-option v-for="item in qrTypeListData" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="内容" v-if="formData.qr_type == '2' && formData.cmd_type == 'confqr'">
                <el-input v-model="formData.param1"></el-input>
            </el-form-item>
            <el-form-item label="授权楼层：" prop="ladder_port" v-if="formData.cmd_type == 'tkOpen' && formData.tk_layer == 1">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                    @change="handleCheckAllChange">全选</el-checkbox>
                <el-checkbox-group v-model="formData.ladder_port" size="medium">
                    <el-checkbox-button v-for="item in portData" :label="item.port_sn" :key="item.port_sn"
                        :value="item.port_sn">{{ item.remark }}</el-checkbox-button>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item prop="qr_str" v-if="qr_str !== ''">
                <vue-qr ref="qrcode" colorLight="#fff" :text="qr_str" :margin="0" :logoScale="0.3" :size="300"></vue-qr>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="confQrMethod" :disabled="qr_button_disabled"
                v-if="qr_button == 1 && ['xsj'].includes(formData.door_gyscode)">生成配置码</el-button>
            <el-button type="primary" @click="onSubmitBefore" v-if="formData.door_status == 1">下发指令</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import vueQr from "vue-qr";
import { Action } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
@Component({
    mixins: [mixinDialogForm],
    components: {
        vueQr
    }
})
export default class equipmentDoorYardOperation extends Vue {
    @Action("equipmentDoor/remote") itemEdit: any;
    @Action("equipmentDoor/cmdList") cmdList: any;
    @Action("equipmentDoor/confQr") confQr: any;
    qr_str: any = '';
    qr_button: any = 2;
    qr_button_disabled = false;
    editInit(data: any) {
        this.remoteMethod(data.door_sn);
        this.formData.door_sn = data.door_sn;
        this.formData.yard_sn = data.yard_sn;
        this.formData.door_gyscode = data.door_gyscode;
        this.formData.door_status = data.door_status;
        this.formData.qrcode_str = data.qrcode_str;
        this.formData.tk_layer = data.tk_layer;
        this.formData.param1 = '';
        this.formData.param2 = '';
        this.formData.ladder_port = [];
        this.qr_str = '';
        this.qr_button = 2;
    }
    isIndeterminate: any = true;
    checkAll: any = false;

    handleCheckAllChange(val) {
        const me = this as any;
        if (val) {
            me.portData.forEach((item) => {
                me.formData.ladder_port.push(item.port_sn);
            })
        } else {
            me.formData.ladder_port = [];
        }
        me.isIndeterminate = false;

    }
    @Action('equipmentLadder/portList') getPort: any;
    portData: any = [];
    remoteLadderPort(door_sn) {
        const me = this as any;
        me.getPort({ door_sn: door_sn, per_page: 100 }).then(({ data }) => {
            me.portData = data;
        });
    }
    cmdListData: any = [];
    remoteMethod(door_sn) {
        const me = this as any;
        me.cmdList({ door_sn: door_sn, manage: 2 }).then(({ data }) => {
            me.cmdListData = data;
        });
    }

    cmdChange() {
        const me = this as any;
        me.qr_str = '';
        me.qr_button_disabled = false;
        me.formData.param1 = me.formData.cmd_type == 'confqr' ? me.formData.qrcode_str : '';
        if (['open', 'erase', 'doorResend', 'retime'].includes(me.formData.cmd_type)) {
            me.qr_button = 2;
        } else {
            me.qr_button = 1;
        }
        if (me.formData.cmd_type == 'tkOpen') {
            me.remoteLadderPort(me.formData.door_sn);
        }
    }
    qrTypeListData: any = [
        { label: '自助注册码', value: '1' },
        { label: '自定义内容', value: '2' }
    ];
    // 二维码内容下发
    qrTypeChange() {
        const me = this as any;
        me.formData.param1 = me.formData.qr_type == '1' ? ('https://userapp.park.hy-access.com/holderin/?yard_sn=' + me.formData.yard_sn) : '';
    }

    confQrMethod() {
        const me = this as any;
        me.qr_button_disabled = true;
        me.confQr(me.formData).then(({ data }) => {
            me.qr_str = data.str;
        });
    }


    // 表单数据
    formData: any = {
        door_sn: "",
        cmd_type: "",
        yard_sn: "",
        param1: "",
        param2: "",
        door_status: "",
        getconf: "",
        door_gyscode: "",
        qrcode_str: "",
        tk_layer: "",
        ladder_port: []
    };

    onSubmitBefore() {
        const me = this as any;
        if (me.formData.ladder_port.length > 0 && me.formData.cmd_type == 'tkOpen') {
            me.formData.param1 = me.formData.ladder_port.toString();
        }
        me.onSubmit();
    }

    /**
     * 校验配置
     *
     * @type {*}
     * @memberof mixinViewRules
     */
    rules: any = {
        cmd_type: [
            {
                required: true,
                message: "请选择操作指令"
            }
        ],
        door_sn: [
            {
                required: true,
                message: "请选择门禁"
            }
        ],
        param1: [
            {
                required: true,
                message: "请输入"
            }
        ],
        ladder_port: [
            {
                required: true,
                message: "请选择呼梯楼层"
            }
        ]
    };
}
</script>
